import React from 'react'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Ellipsis, Cell } from '@nutui/nutui-react-taro'
import Header from '@/sites/components/header'

interface T {
  basic: string
  header: string
  end: string
  middle: string
  rows: string
  expandCollapse: string
  expand: string
  collapse: string
}
const EllipsisDemo = () => {
  const [translated] = useTranslate<T>({
    'zh-CN': {
      basic: '基本用法',
      header: '头部省略',
      end: '尾部省略',
      middle: '中间省略',
      rows: '多行省略',
      expandCollapse: '展开收起',
      expand: '展开',
      collapse: '收起',
    },
    'en-US': {
      basic: 'Basic Usage',
      header: 'Leading',
      end: 'Tailing',
      middle: 'Middle',
      rows: 'Multi-line',
      expandCollapse: 'Expand & Collapse',
      expand: 'expand',
      collapse: 'collapse',
    },
  })
  const content =
      'NutUI 上线后我们研发团队也在不断的优化、测试、使用、迭代的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'

  return (
      <>
        <Header />
        <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
          <h2>{translated.header}</h2>
          <Cell>
            <Ellipsis content={content} direction="start" />
          </Cell>
          <h2>{translated.end}</h2>
          <Cell>
            <Ellipsis content={content} direction="end" />
          </Cell>
          <h2>{translated.middle}</h2>
          <Cell>
            <Ellipsis content={content} direction="middle" />
          </Cell>
          <h2>{translated.rows}</h2>
          <Cell>
            <Ellipsis content={content} direction="start" rows="3" />
          </Cell>
          <h2>{translated.expandCollapse}</h2>
          <Cell>
            <Ellipsis
                content={content}
                onClick={() => Taro.showToast({ title: 'Clicked!' })}
                onChange={(type) => Taro.showToast({ title: type })}
                direction="start"
                expandText={translated.expand}
                collapseText={translated.collapse}
            />
          </Cell>
          <Cell>
            <Ellipsis
                content={content}
                direction="middle"
                expandText={translated.expand}
                collapseText={translated.collapse}
            />
          </Cell>
          <Cell>
            <Ellipsis
                content={content}
                direction="end"
                rows="3"
                expandText={translated.expand}
                collapseText={translated.collapse}
            />
          </Cell>
        </div>
      </>
  )
}

export default EllipsisDemo
